<template>
	<PageLayout title="项目:嘿嘿——修改分组">
		<EditLayout @confirm="handlerConfirm">
			<view class="input-form-box">
				<up-form
					labelWidth="100"
					labelAlign="right"
					labelPosition="left"
					:model="groupData"
					placeholder="请填写项目名称"
					ref="form1"
				>       
				<up-form-item
							label="分组名称"
							prop="name"
							borderBottom
					>
						<up-input
								v-model="groupData.name"
								border="none"
						></up-input>
					</up-form-item>
					<up-form-item
							label="人数"
							prop="name"
							borderBottom
					>
						<up-input
								type="digit"
								v-model="groupData.num"
								border="none"
						></up-input>
					</up-form-item>
					<up-form-item
							label="组内成员"
							prop="name"
							borderBottom
							@click="handlerOpenUserList"
					>
						<view class="user-list-box">
							<view class="item" v-for="user in userList">
								<up-avatar :src="user.avatarUrl"></up-avatar>
							</view>
							<view class="item" v-if="userList.length==0">
								暂无成员
							</view>
						</view>
					</up-form-item>
				</up-form>
				<SelectListModal ref="selectListModalRef" title="用户选择" :list="userList" :afterRequest="handlerSelectReq" 
					labelKey="nickname" valueKey="id" @confirm="handlerConfirmUser" :defalutChecked="userChecked" multiple/>
			</view>
		</EditLayout>
	</PageLayout>

</template>

<script lang="ts">
	
	export default {
		onBackPress(options) {
			console.log('from:' + options)
		}
	}
	
</script>

<script setup lang="ts">
	import SelectListModal from '../../../../components/modal/SelectListModal.vue';
	import EditLayout from '../../../../components/myLayout/EditLayout.vue';
	import PageLayout from '../../../../components/myLayout/PageLayout.vue';
	import {ref} from "vue"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import { ProjectGroupUpdReq, ProjectGroupGetReq } from '../../../../http/project';
	import api from '../../../../http/api';
	// import { onBackPress } from '@dcloudio/uni-app'

	const groupData=ref({})

	const selectListModalRef=ref(null)

	const userChecked=ref([])

	const avatarUrl=ref("https://uview-plus.jiangruyi.com/h5/static/uview/album/2.jpg")

	const userList=ref([])

	const handlerConfirm=()=>{
		let postdata={...groupData.value}
		postdata.userList=userList.value.map((e)=>e.id)
		ProjectGroupUpdReq(postdata).then(res=>{
			uni.redirectTo({
				url:"/pages/aaProject/setting/peopleGroup"
			})
		})
		
	}

	const handlerSelectReq=(res)=>{
		return res.data.list
	}

	const handlerOpenUserList=()=>{
		selectListModalRef.value.open({url:api.project.userList(),method:"GET"})
	}
	
	const handlerConfirmUser=(data)=>{
		userList.value=data.objList
		userChecked.value=data.list
	}

	onLoad((options)=>{
		if(!options.id || options.id<=0) return;
		ProjectGroupGetReq({id:options.id}).then(res=>{
			groupData.value=res.data
			userList.value=[...res.data.userList]
			userChecked.value=userList.value.map(e=>e.id)
		})
		
	})

</script>

<style lang="scss" scoped>

	.user-list-box{
		display: flex;
		flex-wrap: wrap;
		.item{
			margin-right: 10rpx;
		}
	}
	       
</style>
